import React, { useState,useEffect } from 'react'
import {Button ,Select , Input, Modal,  Table, Space,  Switch , Pagination}  from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import ProductLog from '../ProductLog/index'
import axios from '../../../../http/index';
import './index.scss'



export default function ProductAudit() {
    
    // 页面初始渲染
    useEffect(() => {
        Updata()
    },[])

    // 初始化请求封装
    const Updata = () =>{
        axios({
            method:'GET',
            url:'/system/fp/productcheck/updateProduct',
        })
        .then((res) => {
            console.log(res)
            // // setdatas(res.data.data)
            // const data = res.data.data
            // for (let i = 0 ; i < data.length; i++) {
            //     data[i].key = data[i].id
            // }
            // setdatas([...data])
            // console.log(data)
        })
        .catch((err) => {
            console.log(err)
        })
    
    }

    // 列表表头
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key:'id',
            align: 'center'
        },
        {
            title: '产品图片',
            key:'img',
            align: 'center',
            dataIndex: 'img',
            render: (text) => 
            <img style={{ width : 50, height : 60 }} src={text} alt="" />,
        },
        {
            title: '产品名称',
            key:'name',
            align: 'center',
            color: 'rgb(26, 188, 156)', 
            dataIndex: 'name',
            render: (text) => {
                return(
                    <span style={{ color: 'rgb(26, 188, 156)' }}>{text}</span>
                )       
        }
            
        },
        {
            title: '资金方',
            width: 203,
            key:'money',
            align: 'center',
            dataIndex: 'money',
        },
        {
            title: '还款方式',
            key:'imoney2',
            align: 'center',
            dataIndex: 'money2',
        },
        {
            title: '状态',
            key:'zhuangtai',
            align: 'center',
            width: 100,
            dataIndex: 'zhuangtai',
        
            render(text) {
                return (
                    <span>
                        { 
                            text === '未审核' ? 
                            <span >未审核</span> :
                            <div>
                                <span>已审核</span>
                                <span  onClick={() => setIsModalVisible(true)} style={{ color: 'rgb(26, 188, 156)',display:'inline-block' }}   >查看详情</span>
                            </div>
                        }
                    </span>
                );
            }
        },
        {
            title: '启用状态',
            key:'qiyong',
            align: 'center',
            dataIndex: 'qiyong',
            render: () => (
                <Space size="middle">
                <span>上架:</span>
                <Switch checkedChildren="上架" unCheckedChildren="下架" defaultChecked />
                </Space>
            ),
        },
        {
            title: '操作',
            key:'caozuo',
            dataIndex: 'caozuo',
            align: 'center',
            render: () => (
                <Space size="middle" style={{ color: 'rgb(26, 188, 156)' }}>
                <Button size='small'>查看</Button>
                <Button size='small'>审核</Button>
                {/* <Button size='small'onClick={() => setIsModalVjournal(true)}> 日志</Button> */}
                {/* <Button size='small' type="dashed" danger>删除</Button> */}
                </Space>
            ),
        },
    ];
   // 数据数组
    const data = [
     {
         id: 10001,
         key: 10001,
         img: "https://img2.baidu.com/it/u=621739320,1795589074&fm=26&fmt=auto",
         name: "有钱花1号",
         money: "度小满科技(北京)有限公司",
         money2: '等本等息',
         zhuangtai:"已审核"
     },
     {
         id: 10002,
         key: 10002,
         img: "https://img2.baidu.com/it/u=621739320,1795589074&fm=26&fmt=auto",
         name: "有钱花1号",
         money: "度小满科技(北京)有限公司",
         money2: '等本等息',
         zhuangtai:"未审核"
     }
    ];

    // 详情弹窗表头
    const columnsmode = [
        {
          title: '审核时间',
          dataIndex: 'name',
          key: 'name',
          align: 'center'
        },
        {
          title: '审核人员',
          dataIndex: 'age',
          key: 'age',
          align: 'center'
        },
        {
          title: '审核结果',
          dataIndex: 'address',
          key: 'address',
          align: 'center'
        },
        {
          title: '反馈详情',
          dataIndex: 'tags',
          key: 'tags',
          align: 'center'
        },
        ]
        // 详情数据
        const modedata = [
            {
              key: 1,
              name: '2018-07-07 16:58:11',
              age: 'admin',
              address: '审核通过',
              tags: '无',
            },
            {
                key: 2,
                name: '2018-07-07 16:58:11',
                age: 'admin',
                address: '未通过',
                tags: '图片不清晰,需重新上传',
            },
            {
              key: 3,
              name: '2018-07-07 16:58:11',
              age:'admin',
              address: '未通过',
              tags: '图片不清晰,需重新上传',
            },
          ];

    // 资金方下拉
    const { Option } = Select;
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    }
    // 还款方式下拉
    const handleChange2 = (value) => {
        console.log(`selected ${value}`);
    }
    // 产品分类下拉
    const handleChangemode = (value) => {
        console.log(`selected ${value}`);
    }
    // 产品品牌下拉
    const handleChangemode1 = (value) => {
        console.log(`selected ${value}`);
    }
    // 标签下拉
    const handleChangemode2 = (value) => {
        console.log(`selected ${value}`);
    }
    // 上下架下拉
    const handleChangemode3 = (value) => {
        console.log(`selected ${value}`);
    }
    // 审核状态下拉
    const handleChangemode4 = (value) => {
        console.log(`selected ${value}`);
    }
    // 排序方式下拉
    const  handleChangeSort = (value) => {
        console.log(`selected ${value}`);
    }
    // 高级检索弹窗
    const [visible, setVisible] = useState(false);

    // 跳转到多少页
    const showTotal = (total) => {
        return `共 ${total} 条`;
    }


    // 详情弹窗
    const [isModalVisible, setIsModalVisible] = useState(false);

    const handleCancel = () => {
        setIsModalVisible(false);
    }
    // 日志弹窗
    const [journal, setIsModalVjournal] = useState(false);

    const journalmode = () => {
        setIsModalVjournal(false);
    }
    
    return (   
        <div className='product'>
            {/* 头部筛选 */}
            <div className='top'>
                <Space>
                    <Button className='top-btn'>全部产品( <span className='btn-color'>{1000}</span>)</Button>
                    <Button className='top-btn'>已上架( <span className='btn-color'>{1000}</span>)</Button>
                    <Button className='top-btn'>未上架( <span className='btn-color'>{1000}</span>)</Button>
                    <Button className='top-btn'>待审核( <span className='btn-color'>{1000}</span>)</Button>
                    <Button className='top-btn'>未通过( <span className='btn-color'>{1000}</span>)</Button>
                </Space>
            </div>
            {/* 筛选查询 */}
            <div>            
                <div className='product-search'>
                    <div ><SearchOutlined />筛选查询</div>
                    <div>
                        <Button className='search-btn'>查询结果</Button>
                        <Button className='search-btn' onClick={() => setVisible(true)}>高级检索</Button>
                    </div>
                </div>
                <div className='product-search2'>
                    <div>
                        <span >输入搜索：</span>
                        <Input placeholder="产品名称"  style={{ width: 180 }}/>    
                    </div>
                    <div>
                        <span>资金方：</span>
                        <Select  style={{ width: 180 }} onChange={handleChange} placeholder='请选择资金方'>
                                <Option value="jack">度小满科技（北京）有限公司</Option>
                                <Option value="lucy">度小满科技（北京）有限公司</Option>
                                <Option value="Yiminghe">度小满科技（北京）有限公司</Option>
                        </Select>
                    </div>
                    <div>
                        <span>还款方式：</span>
                        <Select style={{ width: 180 }} onChange={handleChange2} placeholder='请选择还款方式'>
                                <Option value="jack1">等本等息</Option>
                                <Option value="lucy1">等本等息</Option>
                                <Option value="Yiminghe1">等本等息</Option>
                        </Select>
                    </div>
                </div>
            </div>
            {/* 高级检索弹窗 */}
            <div >
                <Modal
                    className='mode-box'
                    title="高级检索"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={600}
                    okText="开始检索"
                    cancelText="重置"
                >
                <div className='mode-box'>
                    <div className='mode-div'> 
                        <div>
                            产品分类:
                        </div>
                        <Select style={{ width: 180 }} onChange={handleChangemode} placeholder='请选择产品分类'>
                                <Option value="jack1">等本等息</Option>
                        </Select>
                   </div>
                   <div className='mode-div'> 
                        <div>
                            产品品牌:
                        </div>
                        <Select style={{ width: 180 }} onChange={handleChangemode1} placeholder='请选择品牌'>
                                <Option value="jack1">等本等息</Option>
                        </Select>
                   </div>
                   <div className='mode-div'> 
                        <div>
                            标签:
                        </div>
                        <Select style={{ width: 180 }} onChange={handleChangemode2} placeholder='全部'>
                                <Option value="jack1">等本等息</Option>
                        </Select>
                   </div>
                   <div className='mode-div'> 
                        <div>
                            上下架:
                        </div>
                        <Select style={{ width: 180 }} onChange={handleChangemode3} placeholder='全部'>
                                <Option value="jack1">等本等息</Option>
                        </Select>
                   </div>
                   <div className='mode-div'> 
                        <div>
                            审核状态:
                        </div>
                        <Select style={{ width: 180 }} onChange={handleChangemode4} placeholder='全部'>
                                <Option value="jack1">等本等息</Option>
                        </Select>
                   </div>
                   <div className='mode-div'> 
                        <div>
                            输入搜索:
                        </div>
                        <Input placeholder="产品名称/产品货号"  style={{ width: 180 }}/>    
                   </div>
                </div>
    
                </Modal>
            </div>
            {/* 数据列表头部 */}
            <div className='data-list'>
                <div className='data-list-top'>
                    <span>数据列表</span>
                    <div className='data-list-top-right'>
                        <Select style={{ width: 180 }} onChange={handleChangeSort} placeholder='排序方式'>
                                <Option value="jack1">升序</Option>
                                <Option value="lucy1">降序</Option>
                        </Select>
                        <Button className='top-btn'>新增产品</Button>
                    </div>
                    
                </div>
            </div>

            {/* 数据列表内容 */}
            <div>
                <Table bordered="true" rowSelection='checkbox'   columns={columns} dataSource={data} />
            </div>

            {/* 底部 */}
            {/* <div className='footer'>
            <Pagination
                size="small"
                total={50}
                showTotal={showTotal}
                showSizeChanger
                showQuickJumper
                />
            </div> */}


            {/* 详情弹窗 */}
            <Modal title="审核详情" 
            width={800}
            visible={isModalVisible} 
            onCancel={handleCancel} 
            footer={null}>
                <Table columns={columnsmode} dataSource={modedata} bordered="true"   pagination={false}/>
            </Modal>


            {/* 查看弹窗 */}

            {/* 日志弹窗 */}
            <Modal title="日志详情" 
                width={'80%'}
                visible={journal} 
                onCancel={journalmode} 
                footer={null}
                align ="center"
            >
               <ProductLog/>
            </Modal>
        </div>

    )
    
}
